<template>
	<view>
		<!-- 实现刷新功能 切换显示不显示 -->
		<uni-collapse v-if="data.length!=0">
			<uni-collapse-item :title="data[current].cate_name" :open="open">
				<uni-tag 
				style="margin: 10rpx;"
				:type="index==current?'warning':'default'"
				v-for="(item,index) in data" :key="index"
				:text="item.cate_name" 
				@click="doCheck(index)">
					
				</uni-tag>
			</uni-collapse-item>
		</uni-collapse>
		<view style="padding: 10rpx;">
			<uni-grid :column="2"
			:square="false"
			:showBorder="false"
			:highlight="false">
				<uni-grid-item v-for="(item,index) in cates" :key="index">
				  <view @click="goRooms(index)" style="margin: 10rpx;" hover-class="active">
					<image
						:src="item.pic_url"
						style="width: 100%; height: 300rpx; border-radius: 6rpx;"
						mode=""
					></image>
					<view>{{item.tag_name}}</view>
				  </view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:[],
				current:0,
				cates:[],
				open: false,
				
			}
		},
		mounted() {
			this.getData();
			
		},
		methods: {
			goRooms(index){
				// 点击跳转事件   结构出来   传到rooms
				const {short_name,tag_name}=this.cates[index];
				
				uni.navigateTo({
					url: `../rooms/rooms?tag_name=${tag_name}&short_name=${short_name}`,
					
				});
			},
			getCates(index){
				const url='/douyucdn/api/v1/getColumnDetail';
				// 值很多 需要点那个类获取那个类的  所以需要获得类别名
				const short_name=this.data[index].short_name;
				uni.request({
					url,
					method: 'GET',
					data: {shortName:short_name},
					success: res => {
						console.log(res);
						this.cates=res.data.data;
					},
					fail: () => {},
					complete: () => {}
				});
			},
			
			getData(){
				const url='/douyucdn/api/v1/getColumnList';
				uni.request({
					url,
					method: 'GET',
					data: {},
					success: res => {
						console.log(res);
						this.data=res.data.data;
					},
					fail: (err) => {
						console.log(err);
						
					},
					complete: () => {}
				});
			},
			doCheck(index){
				this.current=index;
				// 点击触发docheck 拿到index 当实参传值
			this.getCates(index);
			this.open = true;
			this.$nextTick(() => {
				this.open = false;
			});
			},
		}
	}
</script>

<style lang="scss">
	.cell{
       word-wrap:break-word;
		word-break:normal; 
	}
	.tag{
		width: 100rpx;
		height: 50rpx;
		word-wrap:break-word;
		word-break:normal; 


	}

</style>
